<template>
    <view class="selectGoods">
        <uni-nav-bar fixed left-icon="left" title="选择商品" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
            </block>
        </uni-nav-bar>
        <view class="search_box">
        	<uni-search-bar style="flex: 1;" bgColor="#FFFFFF" v-model="params.keyword" radius="5" placeholder="搜索产品名称或编号" clearButton="auto"
        	    cancelButton="none" @clear="searchHandle()" />
			<text @click="searchHandle()" style="color: #4DACB1;">查询</text>
        </view>
        <view class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @click="selectHandle(item)">
                <view class="img">
                    <u--image :src="item.mainImageUrl"  width="80px" height="80px"></u--image>
                </view>
                <view class="content" style="width: 90%;">
                    <view class="title">{{ item.commodityName }}</view>
					<view class="sn">规格：{{ item.specificationId }}</view>
                    <view class="sn">箱价：{{ item.caseUnitPrice }}</view>
					 <view class="sn">单价：{{ item.boxConversionUnitPrice }}</view>
					<view class="sn">拆箱价：{{ item.tonConversionUnitPrice }}</view>
                </view>
                <view class="icon-box">
                    <image :src="getIcon(item)" style="width: 18px; height: 18px;"></image>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <!-- 底部 -->
        <view class="bottom-box">
            <view class="num">已选择<text class="num-select">{{ selectList.length }}</text>个商品</view>
            <view class="next" @click="subHandle()">确定</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            params: {
				keyword: '',
				pageNum: 1,
				pageSize: 20
			},
            total: 0,
			status: 'loading',
            list: [],
            defaultIcon: '/static/img/other/defaultIcon.png',
            activeIcon: '/static/img/other/activeIcon.png',
            selectList: []
        }
    },
    onLoad() {
		this.getData()

        const eventChannel = this.getOpenerEventChannel();
        let that = this
        // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on('emitDataHandle', function(data) {
            console.log(data)
            that.selectList = data.data
        })

	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        getData() {
			this.$http.get('/app/commodity/list', this.params).then(res => {
                console.log(res)
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						console.log('有更多数据')
						this.status = 'more'
					} else {
						console.log('没更多数据')
						this.status = 'noMore'
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        searchHandle() {
            this.params.pageNum = 1
            this.status = 'loading'
            this.list = []
            this.getData()
        },
        subHandle() {
            const eventChannel = this.getOpenerEventChannel();
			if(this.selectList.length <= 0) {
				return uni.$u.toast('请选择商品')
			}
            let list = JSON.parse(JSON.stringify(this.selectList))
            list.forEach(item => {
                if(!item.quantity) {
                    item['quantity'] = 1
                    item['type'] = 0
                    item['unitPrice'] = 0
                    item['factoryPrice'] = item.caseUnitPrice
                    item['commodityId'] = item.id
                    item['commoditySpecification'] = '1001'
                    item['commodityType'] = '1001'
                }
            })
            eventChannel.emit('someEvent', {data: list});
            uni.navigateBack()
        },
        closePopup() {
            this.$refs.popup.close()
        },
        selectHandle(item) {
            const index = this.selectList.findIndex(selectItem => selectItem.id === item.id);
            if (index !== -1) {
            // 如果找到了，说明包含该项，删除它
            this.selectList.splice(index, 1);
            } else {
            // 如果没有找到，说明不包含该项，添加它
            this.selectList.push(item);
            }
            console.log(this.selectList)
        },
        getIcon(item) {
            return this.selectList.some(selectItem => selectItem.id === item.id) ? this.activeIcon : this.defaultIcon;
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.uni-navbar__header-btns-right {
    width: 64px !important;
}
.selectGoods {
    padding-bottom: 70px;
}
.search_box {
	display: flex;
	align-items: center;
	padding-right: 20rpx;
}
.list {
    padding-bottom: 40rpx;
}
.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    .content {
        flex: 1;
        margin: 0 20rpx;
        width: 0;
        .title {
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(12, 16, 25, 1);
            margin-bottom: 16rpx;
            // 超出隐藏
        }
        .sn {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
        }
        .price {
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(255, 0, 28, 1);
        }
    }
}

.bottom-box {
    height: 60px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);
    padding: 24rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .num {
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(12, 16, 25, 1);
        .num-select {
            font-size: 40rpx;
            font-weight: 500;
            color: rgba(255, 0, 28, 1);
        }
    }
    .next {
        padding: 20rpx 60rpx;
        border-radius: 60px;
        background: #4DACB1;
        font-size: 30rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }

}
</style>